<template>
  <div>
    <template>
      <el-table
              :data="images"
              style="width: 100%"
              class="lucency-sm border-radius-10"
              border
              :row-class-name="tableRowClassName"
              :header-row-class-name="headerRowClassName">
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                prop="url"
                label="图片"
                width="200">
          <template slot-scope="scope">
            <a :href="scope.row.url" target="_blank">
              <div class="demo-image">
                <div class="block">
                  <el-image
                          class="border-radius-10"
                          style="width: 100px; height: 100px"
                          :src="scope.row.url"
                          :fit="'fill'"
                          lazy
                          :previewSrcList="images.url"></el-image>
                </div>
              </div>
            </a>
          </template>
        </el-table-column>
        <!--文件名-->
        <el-table-column
                prop="filename"
                label="文件名"
                width="600">
        </el-table-column>
        <!--大小-->
        <el-table-column
                prop="filesize"
                label="大小">
          <template slot-scope="scope">
            {{getSize(scope.row.filesize)}}MB
          </template>
        </el-table-column>
        <!--操作-->
        <el-table-column
                label="操作">
          <template slot-scope="scope">
            <el-button @click="copyUrl(scope.row.url)" class="margin-top-10" type="success" size="small">复制</el-button>
            <el-button @click="deletePictureById(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size=pageInfo.pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total=pageInfo.total class="margin-top-10 ">
      </el-pagination>
    </template>
  </div>
</template>

<script>

  // jwt 解析token
  import jwtDecode from 'jwt-decode'

  export default {
    name: "Images",
    data() {
      return {
        // 图片
        images: [],
        // 分页
        pageInfo: {
          currentPage: 1,
          pageSize: 5,
          total: 4,
        },
      }
    },
    methods: {
      tableRowClassName() {
        return 'black-row'
      },
      headerRowClassName() {
        return 'black-row'
      },
      getSize(val) {
        const value = val / 1024 / 1024
        return value.toFixed(2)
      },
      deletePictureById(obj) {

        this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(`deletePicture/${obj.id}`).then(result => {
            if (result.data.meta.status !== 200) return this.$message.error(result.data.meta.message)
            this.getImages()
            this.$message.success(result.data.meta.message)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      getImages() {
        const token = jwtDecode(window.sessionStorage.getItem("token"))

        if (token.userid !== null) {
          this.$http.get(`pageing/${token.userid}`,{params: {pageInfo: this.pageInfo}}).then(result => {
            if (result.data.meta.status != 200) return this.$message.error(result.data.meta.message)
            this.images = result.data.pictures
            this.pageInfo.total = result.data.total
          })
        }
      },
      copyUrl(url) {
        this.handleCopyUrl(url)
      },
      //复制
      handleCopyUrl(url) {
        // 创建一个 Input标签
        const cInput = document.createElement('input')
        cInput.value = url
        document.body.appendChild(cInput)
        cInput.select() // 选取文本域内容;
        // 执行浏览器复制命令
        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
        // Input要在正常的编辑状态下原生复制方法才会生效
        document.execCommand('Copy')
        this.$message.success("复制成功")
        /// 复制成功后再将构造的标签 移除
        cInput.remove()
      },
      handleSizeChange(obj) {
        this.pageInfo.pageSize = obj
        this.getImages()
      },
      handleCurrentChange(obj) {
        this.pageInfo.currentPage = obj
        this.getImages()
      },
    },

    created() {
      this.getImages()
    }
  }


</script>

<style scoped>

  /*elementUI*/
  .black-row {
    background: #4f4f4f;
  }


</style>